$yellowcolor: #FFC312;

html, body {margin: 0; height: 100%}
html.notebook, html.notebook body {overflow-y: hidden}

body {
    margin: 0; padding: 0;
    background: #272822;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    .notebook-recipe {
        color: $yellowcolor;
    }

    .notebook-recipe:before {
        display: inline-block;
        content: '—';   // mdash
        margin: 0 10px;
    }

    .bigbutton {
        height: 30px;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 1.1rem;
        font-weight: bold;
        cursor: pointer;
    }
}

.home-app {

    padding: 10px;
    font-size: 18px;

    &, a {
        color: white;
        &:visited {
            color: #aaa;
        }
    }

    display: grid;
    grid-template-columns: auto 150px;
    grid-template-areas: "notebooklist tools";

    .list {
        grid-area: notebooklist;

        h2 {
            margin-left: 16px;
        }
    }

    .tools {
        grid-area: tools;
        text-align: left;
        padding-top: 15px;

        .btn-new {
            background-color: #00a8ff;
            text-align: right;
            width: 113px;
            white-space: nowrap;

            &.creating {
                text-align: center;
                & .sk-spinner {
                    margin: 0 auto;
                }
            }
        }

        .recipe-list {
            padding: 10px;
        }

        .recipe-list .recipe-item {
            display: block;
            cursor: pointer;
            text-decoration: underline;

            padding-top: 5px;

            &:hover {
                color: $yellowcolor;
            }
        }
    }
}

.notebook-app {
    
    body {
        font-size: 14px;
    }

    .CodeMirror {
        width: 100%;
        height: calc(100vh - 50px);
        
        font-family: 'Roboto Mono', Menlo, 'Ubuntu Mono', Monaco, Consolas, 'source-code-pro', monospace;
        line-height: 1.414;
    }

    .CodeMirror-linenumber {
        padding-right: 20px;
    }

    .cm-s-monokai .CodeMirror-linenumber {
        color: #777;
    } 

    #layout {
        display: grid;
        grid-template-rows: 50px auto;
        grid-template-areas: 'top top top'
                             'code gutter console';
    }

    #top {
        grid-area: top;
        background-color: #333;
        padding: 10px;
        vertical-align: middle;

        display: grid;
        grid-template-columns: 100px auto auto 100px;
        grid-template-areas: 'btn-run notebook-header console-options btn-home';
    }

    #top #btn-run {
        grid-area: btn-run;
    }

    #top #notebook-header {
        grid-area: notebook-header;
        font-size: 20px;
        line-height: 30px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    #top #notebook-header .notebook-name {
        color: white;
        font-weight: bold;
        cursor: text;
    }

    #top #console-options {
        grid-area: console-options;
        text-align: right;

        color: white;
        line-height: 30px;
        padding-right: 30px;
    }

    #top #btn-home {
        grid-area: btn-home;
        text-align: right;
    }

    #top #btn-run .bigbutton.run {
        width: 90px;

        background-color: rgb(107, 183, 175);

        &.running {
            background-color: #f06;
        }
    }

    #top #btn-home .bigbutton {
        background-color: #9b59b6;
    }

    #left {
        grid-area: code;
    }

    #gutter {
        grid-area: gutter;
        background-color: #333;
        cursor: col-resize;
    }

    #right {
        grid-area: console;
    }

    #console {
        color: #f8f8f2;
        width: 100%;
        height: calc(100vh - 50px); // 70: 50 + 10 (padding) * 2
        overflow: scroll;
        unicode-bidi: embed;
        font-family: 'Roboto Mono', Menlo, 'Ubuntu Mono', Monaco, Consolas, 'source-code-pro', monospace;
        white-space: pre;
        margin-bottom: 20px;
        // padding-left: 10px;
    }

    #console .stderr { color: red; }
    #console .info { color: #888; }
    #console .forcednl { background-color: #f06; color: white; }
}